<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <script type="text/javascript" src="${ bp }/static/echarts-5.0.1/echarts.min.js"></script>
</head>

<body>
<%--搜索表单--%>
<div class="layui-container">
    <div class="layui-inline">
        <label class="layui-form-label">请选择月分</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="month" placeholder="yyyy-MM">
        </div>
    </div>
    <div id="main" style="height:780px;"></div>

</div>


<!-- layui.all.js 包含layui核心库和所有组件 -->
<script type="text/javascript" src="${ bp }/static/layui/layui.all.js"></script>
<script>
    // Layui遵循模块化开发思想，所有的功能模块，原则上在使用之前都需要声明
    layui.use(['jquery','laydate'], function () {
        let $ = layui.jquery;
        let laydate = layui.laydate;

        // 基于准备好的dom，初始化echarts实例
        let chart = echarts.init(document.getElementById('main'));
        //x轴日期
        let days=[];
        //y轴人数
        let counts=[];
        //获取当前月份
        let now = new Date();
        let month=now.getFullYear()+"-"+((now.getMonth()+1+'').length===1 ? '0'+(now.getMonth()+1+''):(now.getMonth()+1+''));

        //ajax亲求接口数据
        function getData(){
            $.ajax({
                url: '${ bp }/useradmin?method=createTimeStat',
                type: 'post',
                //使用同步请求
                async:false,
                data:{
                    date:month
                },
                dataType: 'json',
                success: (result) => {
                    days=result.data.days;
                    counts=result.data.counts;
                },
                error: () => {
                    console.log('请求失败！');
                }
            });
        }
        getData();


        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '一个月内用户注册数量'
            },
            toolbox:{
                feature: {
                    //数据图模型
                    magicType: {
                        type: ['line', 'bar']
                    },
                    //数据列表
                    dataView:{},
                    //保存为图片
                    saveAsImage:{
                        pixelRatio:2
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                },
                {
                    type: 'slider'
                }
            ],
            xAxis: {
                data: days
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: counts,
                itemStyle:{
                    normal:{
                        label:{
                            show:true,
                            position:'top'
                        }
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(option);
        //年月选择器
        laydate.render({
            elem: '#month'
            ,type: 'month',
            value:month
            ,done: function(value, date, endDate){
               month=value;
                getData();
                chart.setOption({
                    xAxis: {
                        data: days
                    },
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: counts,
                        itemStyle:{
                            normal:{
                                label:{
                                    show:true,
                                    position:'top'
                                }
                            }
                        }
                    }]
                });
            }
        });



    });
</script>

</body>
</html>
